<template>
  <div class="hello">
    <div class="hello_top">
    	<img v-bind:src="ban"/>
    </div>
    	<!--标题-->
    <div class="biaoti">
    	<div class="xiahua" style="margin-left:10% ;"></div>
    	<div class="xie">/</div>   		
    	<div class="zhi">电视·直播</div>    	
    	<div class="xie">/</div>
    	<div class="xiahua" style="margin-right:10% ;"></div>    		   	
    </div>
    <!--直播-->
    <div class="shiping">
    	<div class="zhib">
    		<img src=""/>
    	</div>
    	<div class="liebiao">
    		<div class="tv">
    			<dl v-for="(index,value) in ban1"  @click="dianj('xianQing',index)">
    				<dt><img :src="index.s_url"/></dt>
    				<dd>{{index.ymd}}</dd>
    			</dl>
    		</div>
    	</div>
    </div>
    
    	<!--标题-->
    <div class="biaoti">
    	<div class="xiahua" style="margin-left:10% ;"></div>
    	<div class="xie">/</div>   		
    	<div class="zhi">视频·特惠</div>    	
    	<div class="xie">/</div>
    	<div class="xiahua" style="margin-right:10% ;"></div>    		   	
    </div>
    <div class="s" >
    		<dl v-for='index in ban2'  @click="dianj('xianQing',index)">
    			
    			<dt><img v-bind:src="index.image_background_url"/></dt>
    			<dd>{{index.video_decribe}}</dd>
    			
    		</dl>
    	</div>
    
    
    
    
  </div>
  
</template>

<script>
	import $ from 'jquery';
	import Router from 'vue-router';
	import axios from 'axios';
export default {
  name: 'hello',
  data () {
    return {
     ban: [],
     ban1:[],
     ban2:[]
    }
  },
  methods:{
  	dianj(z,index){
	      	this.$router.push({path:z})
	      	eventBus.$emit('data',index)
	      },
  	aac(){
  		var _this = this ;
  		axios.get("http://localhost:8080/static/data/01_1.json").then(function (data){
            _this.ban = data.data.msg[0].url
          console.log( _this.ban)
        })
  		axios.get("http://localhost:8080/static/data/01_5.json").then(function (data){
            _this.ban1 = data.data.msg.liveProducts
          console.log( _this.ban1)
        })
  		axios.get("http://localhost:8080/static/data/01_2.json").then(function (data){
            _this.ban2 = data.data.msg.videosList
          console.log( _this.ban2)
        })
      }        
  },
  mounted(){
  	this.aac()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hello{
		width: 100%;
		margin-top:35px;
	}
.hello_top{
	width: 100%;
}
.hello_top img{
	width: 100%;
}
/*标题部分*/
.biaoti{
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction:row;
	justify-content: space-between;
}
	.xiahua{
		width: 20%;
		height:15px;
		border-bottom: 1px solid #ccc;
	}
	.biaoti div{
		text-align: center;
		line-height: 30px;
		font-weight: 600;
	}
	.xie{
		color: #ccc;
	}

/*直播区*/
.shiping{
	margin-bottom: 10px;
}
.liebiao{
	width: 100%;
	overflow-x:auto;
}
.liebiao::-webkit-scrollbar{
	width:0;
}
.tv{
	display: flex;
	flex-direction:row;

}

/*特惠/视频*/
	.s{
		width: 100%;
		height: 100%;		
	}
	.s dl{
		position:relative;
		width: 100%;
		height: 200px;
		margin-bottom: 20px;		
	}
	.s dl dt{
		width: 100%;
		height:100%;
	}
	.s dl dt img{
		width: 100%;
		height:100%;		
	}
	.s dl dd{
		position: absolute;
		bottom:10px;
		color: white;
	}
</style>
